import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  ImageBackground,
  Modal,
  TouchableHighlightBase,
  SafeAreaView,
  StatusBar
} from 'react-native';
import {
  width,
  titleHeight,
  deviceWidth,
  unitWidth,
  statusBarHeight,
  reallySize,
} from '../../../utils/Global';
import { TextInput } from 'react-native-gesture-handler';

import { Images } from '../../../public/images/images';
import { Constant } from '../../../public/js/constant';
import fetchWebApi from '../../../public/WebApi/fetchBase';
import { GET_USER_USERINFO, POST_USER_ADDFRIEND, DELETE_USER_DELFRIEND } from '../../../public/WebApi/mailListApi';
import getStorageValue from '../../../utils/getStorageValue';
import Layer from '../../../utils/Layer';
import MySocialCircle from '../../../components/mySocialCircle';
import ImageViewer from 'react-native-image-zoom-viewer';

export default class introduces extends Component {
  constructor(props) {
    super(props);
    this.state = {
      IntroduceList: {},
      occupationLabels: [],
      Selfdisplay: [],
      id: this.props.navigation.state.params.id,
      states2: true,
      isModal: false,
      remarksName: this.props.navigation.state.params.remarksName,
      addFriendMessage: '',
      bronze: '',
      silver: '',
      gold: '',
      title: [],
      inputText: '',
      isImageShow: false,
      imageIndex: 0,
      remarks: [],
      i: 0,
      filePath: [
        { url: "" },
        { url: "" },
        { url: "" },
        { url: "" },
        { url: "" },
        { url: "" },
        { url: "" },
        { url: "" },
        { url: "" },
        { url: "" },
        { url: "" },
        { url: "" },
      ],
      filePath1: [

      ],
      isSelect: false,
      isConfig: false
    };

  }

  _renderImage(item, index) {
    // let url = item.filePath;
    // let source = { uri: url };
    // this.state.title[this.state.i++] = item.title
    // console.log(item);
    // console.log(this.state.title)


    return (
      <TouchableOpacity
        onPress={this._openMax.bind(this, index)}
        key={'image' + index}
        style={item.url == '' ? { display: "none" } : { display: "flex" }}
      >
        <Image
          style={styles.Selfdisplay_image}
          source={{ uri: item.url != '' ? item.url : null }}
          resizeMode='cover'
        />
        {this.state.title[index] == '' ? null : <>
          <View style={styles.Selfdisplay_img2}>
            <Text style={styles.img_text} numberOfLines={1} ellipsizeMode={'tail'}>
              {this.state.title[index]}
            </Text>
          </View>
        </>}

      </TouchableOpacity>
    );
  }

  _openMax(index) {
    this.setState({
      isImageShow: true,
      imageIndex: index,
    });
  }

  componentDidMount = () => {
    this.getUserInfo()
  };

  // 获取个人简介页面列表
  async getUserInfo() {
    const res = await fetchWebApi(GET_USER_USERINFO, { token: await getStorageValue(Constant.TOKEN), friendId: this.state.id }, 'POST')
    console.log('########## getUserInfo');
    console.log(res.data);

    if (res.status == 200) {
      this.setState({
        IntroduceList: res.data[0]
      })
      this.setState({
        occupationLabels: this.state.IntroduceList.occupationLabel,
        Selfdisplay: this.state.IntroduceList.filePath
      })
      if (this.state.IntroduceList.filePath != null) {
        for (let i = this.state.IntroduceList.filePath.length - 1; i >= 0; i--) {
          console.log(123123)
          console.log(this.state.IntroduceList.filePath.length)
          console.log(this.state.IntroduceList.filePath[i])
          this.state.filePath[i].url = this.state.IntroduceList.filePath[i]
          this.state.filePath1[i] = this.state.filePath[i]
          // this.state.filePath1 = this.state.filePath.filter((v) => {
          //   return v && v.trim();//注:IE9(不包含Ie9)以下的版本没有trim()方法
          // })
        }
      }

      // console.log(this.state.filePath)
      this.setState({
        title: this.state.IntroduceList.title
      })
    }
  }

  // 删除好友
  async delFriend() {
    const res = await fetchWebApi(DELETE_USER_DELFRIEND, { token: await getStorageValue(Constant.TOKEN), friendId: this.state.id }, 'DELETE')
    console.log('########### delFriend');
    console.log(res);
    if (res.status == 200) {
      this.setState({
        isConfig: false
      })
      this.props.navigation.state.params.refresh()
      this.props.navigation.goBack();
      Layer.showMsg('删除好友成功')
    }
  }



  // 判断诚信
  reputation() {
    this.state.IntroduceList.map((item, index) => {
      this.reputations(item)
    })
  }
  reputations(item) {
    return (
      parseInt(item.creditLevel) == 1 ?
        <>
          <Text style={{ color: '#D38D0F' }}>★</Text>
          <Text style={{ color: '#C4C4C4' }}>★</Text>
          <Text style={{ color: '#C4C4C4' }}>★</Text>
          <Text style={{ color: '#C4C4C4' }}>★</Text>
          <Text style={{ color: '#C4C4C4' }}>★</Text>
        </> : parseInt(item.creditLevel) == 2 ?
          <>
            <Text style={{ color: '#D38D0F' }}>★</Text>
            <Text style={{ color: '#D38D0F' }}>★</Text>
            <Text style={{ color: '#C4C4C4' }}>★</Text>
            <Text style={{ color: '#C4C4C4' }}>★</Text>
            <Text style={{ color: '#C4C4C4' }}>★</Text>
          </> : parseInt(item.creditLevel) == 3 ?
            <>
              <Text style={{ color: '#D38D0F' }}>★</Text>
              <Text style={{ color: '#D38D0F' }}>★</Text>
              <Text style={{ color: '#D38D0F' }}>★</Text>
              <Text style={{ color: '#C4C4C4' }}>★</Text>
              <Text style={{ color: '#C4C4C4' }}>★</Text>
            </> : parseInt(item.creditLevel) == 4 ?
              <>
                <Text style={{ color: '#D38D0F' }}>★</Text>
                <Text style={{ color: '#D38D0F' }}>★</Text>
                <Text style={{ color: '#D38D0F' }}>★</Text>
                <Text style={{ color: '#D38D0F' }}>★</Text>
                <Text style={{ color: '#C4C4C4' }}>★</Text>
              </> : parseInt(item.creditLevel) == 5 ?
                <>
                  <Text style={{ color: '#D38D0F' }}>★</Text>
                  <Text style={{ color: '#D38D0F' }}>★</Text>
                  <Text style={{ color: '#D38D0F' }}>★</Text>
                  <Text style={{ color: '#D38D0F' }}>★</Text>
                  <Text style={{ color: '#D38D0F' }}>★</Text>
                </> : parseInt(item.creditLevel) == 0 ?
                  <>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                    <Text style={{ color: '#C4C4C4' }}>★</Text>
                  </> : null
    )
  }

  // 判断性别
  sex(sex) {
    return (
      sex == '男' ? <Image
        style={styles.introduce_img}
        source={Images.Frame2}
      /> : null ||
        sex == '女' ? <Image
        style={styles.introduce_img}
        source={Images.Frame3}
      /> : null || sex == '' == null ? null : null
    )
  }

  // 添加好友
  async addfriend() {
    const res = await fetchWebApi(POST_USER_ADDFRIEND, {
      token: await getStorageValue(Constant.TOKEN),
      friendId: this.state.IntroduceList.friendId,
      addFriendMessage: this.state.addFriendMessage
    }, 'POST')

    if (res.status == 200) {
      this.setState({
        isModal: false
      })
      Layer.showMsg('已发送好友请求')
    }
  }

  render() {
    // 社圈
    const mySocialCircle =
      <>
        <MySocialCircle
          SocialCircleThis={this}
          userInfoId={this.state.id}
        />
      </>
    // 判断是否是好友
    let showtext = this.state.IntroduceList.flag == 1 ? (
      <TouchableOpacity onPress={() => {
        this.props.navigation.navigate('messagePage', { data: this.state.IntroduceList })
        {/* 判断会员改变样式 */ }
      }} style={styles.privatechat2}>
        {/* 判断会员改变图片 */}
        <Image style={styles.privatechat_Img} source={Images.siliao} />
      </TouchableOpacity>
    ) : (
      <TouchableOpacity onPress={() => {
        this.setState({
          isModal: true
        })
        {/* 判断会员改变样式 */ }
      }} style={styles.privatechat2}>
        {/* 判断会员改变样式 */}
        <Text style={styles.privatechat_text}>加好友</Text>
      </TouchableOpacity>
    )

    let showtext2 = this.state.IntroduceList.flag == 1 ? (
      //  判断会员改变样式 *
      <TouchableOpacity style={styles.remark2} onPress={() => {
        this.props.navigation.navigate('remarks', {
          id: this.state.id,
          refresh2: (remarksName) => {
            this.getUserInfo()
            this.setState({
              remarksName: remarksName == null ? this.state.IntroduceList.nickName : remarksName
            })
            this.props.navigation.state.params.refresh()

          },
        });
      }} >
        <Text
          //  判断会员改变样式 *
          style={styles.remark_text}>
          备注
        </Text>
      </TouchableOpacity>
    ) : (
      <TouchableOpacity onPress={() => {
        this.props.navigation.navigate('messagePage', { data: this.state.IntroduceList })
      }} style={styles.remark2}>
        {/*   判断会员改变图片 * */}
        <Image style={styles.privatechat_text3} source={Images.siliao} />
      </TouchableOpacity>
    )
    {/* 自我展示 */ }
    let Exhibition = this.state.states2 ? (
      <View style={styles.Selfdisplay}>
        <ScrollView>
          {
            this.state.Selfdisplay == null ?
              <>
                <View style={styles.bottom_container}>
                  <Text style={styles.bottom_text}>用户很懒，什么都没展示</Text>
                </View>
              </>
              :
              <>
                <View>
                  {this.state.filePath1.map((item, index) => {
                    return this._renderImage(item, index);
                  })}
                </View>
                {this.state.isImageShow ?
                  <Modal visible={true} transparent={true} style={{ height: '100%' }}
                    onRequestClose={() => {
                      this.setState({
                        isImageShow: false,
                      });
                    }}>
                    {/* <View style={styles.statusBar}>

                    </View> */}
                    <ImageViewer
                      imageUrls={this.state.filePath1}
                      style={{ color: 'black' }}
                      onCancel={() => {
                        this.setState({
                          isImageShow: false,
                        });
                      }}
                      index={this.state.imageIndex}
                      saveToLocalByLongPress={false}
                      backgroundColor="white"
                      renderHeader={() => {

                      }}
                      renderFooter={(index) => {
                        return (
                          <>
                            {this.state.title[index] == '' ? null :
                              <>
                                <View style={{ display: 'flex', justifyContent: 'center', padding: 20 }}>
                                  <Text style={{ color: 'white', fontSize: 20, }}>{this.state.title[index]}</Text>
                                </View>
                              </>}
                          </>
                        )
                      }}
                      footerContainerStyle={{ width: '100%', backgroundColor: 'gray', opacity: 0.5 }}
                    >
                    </ImageViewer>
                  </Modal>
                  : null}
              </>
          }
        </ScrollView>
      </View>
    ) : (
      <View style={styles.dynamic}>
        {mySocialCircle}
      </View>
    )
    // 会员图标
    // 名片

    let hobby = <>
      <View style={styles.hobby2}>
        {/* 判断会员更改图标 */}
        <Image style={styles.img} source={this.state.IntroduceList.vip == 0 ?
          require('../../../assets/images/introduces/hobby2.png') :
          require('../../../assets/images/introduces/hobby.png')
        } />
        <Text style={this.state.IntroduceList.vip == 0 ? styles.information_text0 : styles.information_text0_member}>
          爱好：{this.state.IntroduceList.hobby == null ? '用户暂未添加爱好~' : this.state.IntroduceList.hobby + ''}
        </Text>
      </View>
    </>
    let phone = <>
      <View style={styles.hobby2}>
        {/* 判断会员更改图标 */}
        <Image style={styles.img} source={this.state.IntroduceList.vip == 0 ?
          require('../../../assets/images/introduces/phone2.png') :
          require('../../../assets/images/introduces/phone.png')
        } />
        <Text style={this.state.IntroduceList.vip == 0 ? styles.information_text0 : styles.information_text0_member}>
          电话：{this.state.IntroduceList.phone == null ? '用户未添加手机号码~' : this.state.IntroduceList.phone}
        </Text>
      </View>
    </>

    let information = (
      <ImageBackground
        source={null}
        style={styles.jianjie}
        imageStyle={{ borderRadius: 12 }}>
        <View style={{ flexDirection: 'row', display: 'flex', }}>
          <TouchableOpacity onPress={() => {
            this.props.navigation.push('friendAvatar', {
              friendAvatar: [{ url: this.state.IntroduceList.avatar }]
            })
          }} style={styles.tops}>
            <ImageBackground source={{ uri: this.state.IntroduceList.avatar }} imageStyle={{ borderRadius: 5 }} style={styles.tongxiang}>
            </ImageBackground>
          </TouchableOpacity>
          {/* 展示个人信息 */}
          <View style={styles.contents}>
            <View style={styles.introduce}>
              <View style={styles.introduce_content}>
                <View style={styles.content_view}>
                  <Text numberOfLines={1} ellipsizeMode={'tail'} style={this.state.IntroduceList.vip == 0 ? styles.introduce_text0 : styles.introduce_text0_2}>
                    {this.state.remarksName != '' && this.state.remarksName != undefined ? this.state.remarksName : this.state.IntroduceList.nickName}
                  </Text>
                  {this.state.IntroduceList.userType == 0 ? this.sex(this.state.IntroduceList.sex) : <>
                    <Image style={{ width: 18, height: 18, marginLeft: 5 }} source={require('../../../assets/images/maillist/enterprise.png')} />
                  </>}
                  <View style={styles.tops_view}>
                    {/* 聊天按钮 */}
                    {this.state.IntroduceList.flag == 3 ? null : showtext}
                    {/* 设置备注 */}
                    {this.state.IntroduceList.flag == 3 ? null : showtext2}
                  </View>
                </View>
              </View>
            </View>
            <View style={styles.information}>
              {/* 职业 */}
              <View style={styles.occupation}>
                <Image style={styles.img} source={this.state.IntroduceList.vip == 0 ?
                  require('../../../assets/images/introduces/occupation2.png') :
                  require('../../../assets/images/introduces/occupation.png')
                } />
                <Text style={this.state.IntroduceList.vip == 0 ? styles.information_text0 : styles.information_text0_member}>
                  职业：{this.state.IntroduceList.occupation == null ? '用户未设置职业~' : this.state.IntroduceList.occupation}
                </Text>
              </View>
              {/* 诚信 */}
              <View style={styles.reputation}>
                <Image style={styles.img} source={this.state.IntroduceList.vip == 0 ?
                  require('../../../assets/images/introduces/reputation2.png') :
                  require('../../../assets/images/introduces/reputation.png')
                } />
                <Text style={this.state.IntroduceList.vip == 0 ? styles.information_text0 : styles.information_text0_member}>诚信：</Text>
                <Text style={styles.information_text4}>
                  {this.reputations(this.state.IntroduceList)}
                </Text>
              </View>
              {/* 爱好 */}
              {this.state.IntroduceList.showIndex == 0 ? hobby : phone}
              {/* 格言 */}
              <View style={styles.hobby2}>
                <Image style={[styles.img, { width: 17, height: 17, marginLeft: 2 }]} source={this.state.IntroduceList.vip == 0 ?
                  require('../../../assets/images/introduces/motto2.png') :
                  require('../../../assets/images/introduces/motto.png')
                } />
                <Text numberOfLines={1} ellipsizeMode={'tail'} style={[this.state.IntroduceList.vip == 0 ? styles.information_text3 : styles.information_text3_member, { marginLeft: 6 }]}>
                  格言：{this.state.IntroduceList.motto != null ? this.state.IntroduceList.motto : '用户很懒，什么都没写~'}
                </Text>
              </View>
              {/* <View style={styles.hobby2}>
                <Text numberOfLines={1} ellipsizeMode={'tail'} style={this.state.IntroduceList.vip == 0 ? styles.information_text3 : styles.information_text3_member}>电话：{this.state.IntroduceList.phone}</Text>
              </View> */}

              <View style={styles.label}>
                {
                  this.state.occupationLabels.map((item, index) => {
                    return (
                      // 根据会员改变样式
                      <View key={index} style={this.state.IntroduceList.vip == 0 ? styles.label_box : styles.label_box_member
                      }>
                        <Text style={styles.label_text}>{item}</Text>
                      </View>
                    );
                  })
                }
              </View>
            </View>
          </View>
        </View>


      </ImageBackground>
    )

    return (
      <View style={{ flex: 1 }}>
        <View>
          {/* 简介背景图 */}
          <Image
            style={[styles.beijing, { marginTop: this.state.isImageShow ? 50 : null }]}
            source={Images.beijing}
          />
          {/* 返回上一页按钮 */}
          <View style={styles.body}>
            <View style={styles.heard}>
              <TouchableOpacity onPress={() => {
                this.props.navigation.state.params.refresh()
                this.props.navigation.goBack();
              }} style={styles.goback}>
                <View style={styles.goback_text}>
                  <Image style={{ width: 12, height: 12, resizeMode: 'contain' }} source={Images.Vector_14} />
                </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => {
                this.setState({
                  isSelect: true
                })
              }} style={styles.more}>
                <View style={styles.more_text}>
                  <Image style={{ width: 20, height: 20 }} source={require('../../../assets/images/introduces/more.png')} />
                </View>
              </TouchableOpacity>
            </View>
            <View style={{ alignSelf: 'center' }}>
              {information}
            </View>
          </View>

          {/* 更多列表弹窗 */}
          <Modal transparent={true} visible={this.state.isSelect} animationType='fade' onRequestClose={() => {
            this.setState({
              isSelect: false,
            });
          }}>
            <TouchableOpacity style={{ height: '100%' }} onPress={() => {
              this.setState({
                isSelect: false
              })
            }}>
              <View style={styles.select}>
                <TouchableOpacity
                  onPress={() => {
                    this.setState({
                      isConfig: true,
                      isSelect: false
                    })
                  }}
                  style={styles.select_list}>
                  <Text style={styles.select_text}>删除好友</Text>
                </TouchableOpacity>
              </View>
            </TouchableOpacity>
          </Modal>

          {/* 确定删除 */}
          <Modal visible={this.state.isConfig} animationType="fade" transparent={true} onRequestClose={() => {
            this.setState({
              isConfig: false,
            });
          }}>
            <ScrollView style={styles.content}>
              <View style={styles.Modals}>
                <View style={styles.Modals_top}>
                  <TouchableOpacity onPress={() => {
                    this.setState({
                      isConfig: false
                    })
                  }}>
                    <Text style={styles.top_text}>取消</Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.Modals_content}>
                  <Text style={styles.content_text}>确定要删除该好友？</Text>
                </View>
                <View style={styles.Modals_bottom}>
                  <TouchableOpacity onPress={() => {
                    this.delFriend()
                  }} style={styles.bottom_btn2}>
                    <Text style={styles.btn_text}>确定</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </ScrollView>
          </Modal>

          {/* 添加好友弹出框 */}
          <Modal
            animationType='slide'
            transparent={true}
            visible={this.state.isModal}
            onRequestClose={() => {
              this.setState({
                isModal: false,
              });
            }}
          >
            <ScrollView style={styles.content}>
              <View style={styles.Modals}>
                <View style={styles.Modals_top}>
                  <TouchableOpacity onPress={() => {
                    this.setState({
                      isModal: false
                    })
                  }}>
                    <Text style={styles.top_text}>取消</Text>
                  </TouchableOpacity>
                  <Text style={styles.top_text2}>申请加好友</Text>
                  <Text>        </Text>
                </View>
                <View style={styles.Modals_content}>
                  <Image style={styles.content_img} source={{ uri: this.state.IntroduceList.avatar }} />
                  <Text style={styles.content_text}>{this.state.IntroduceList.nickName}</Text>
                </View>
                <View style={styles.Modals_bottom}>
                  <TextInput
                    onEndEditing={(value) => {
                      this.state.addFriendMessage = value.nativeEvent.text
                    }}
                    placeholder='请输入好友留言' clearButtonMode='always' style={styles.bottom_input} />
                  <TouchableOpacity onPress={() => {
                    if (this.state.addFriendMessage == '') {
                      Layer.showMsg('请输入好友留言')
                    } else {
                      this.addfriend()
                    }
                  }} style={styles.bottom_btn}>
                    <Text style={styles.btn_text}>发送</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </ScrollView>
          </Modal>
          <View style={styles.Selfdisplay_view}>
            <TouchableOpacity onPress={() => {
              this.setState({
                states2: true
              })
            }}>
              <Text style={this.state.states2 ? styles.Selfdisplay_text : styles.Selfdisplay_text2}>自我展示</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {
              this.setState({
                states2: false
              })
            }}>
              <Text style={!this.state.states2 ? styles.dynamic_text : styles.dynamic_text2}>动态</Text>
            </TouchableOpacity>
          </View>
        </View>
        {Exhibition}
      </View >
    );
  }
}
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent',
  },
  heard: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    position: 'relative',
    top: -200,
  },
  goback: {
    width: 30,
    height: 30,
    backgroundColor: '#ffffff',
    borderRadius: 25,
    marginLeft: 10,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center'
  },
  goback_text: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  more: {
    width: 30,
    height: 30,
    // position: 'relative',
    // top: -225,
    // left: 350,
    backgroundColor: '#ffffff',
    borderRadius: 25,
    marginEnd: 10,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center'
  },
  more_text: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  jianjie: {
    marginTop: -150,
    width: 370,
    backgroundColor: "#44A5FF",
    paddingTop: 25,
    paddingLeft: 25,
    paddingRight: 25,
    paddingBottom: 15,
    borderRadius: 12,
    resizeMode: 'cover',
    display: 'flex',
    flexDirection: 'column',
  },
  beijing: {
    height: 250,
    width: '100%'
  },
  tops: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  tops_view: {
    display: 'flex',
    flexDirection: 'column',
    position: 'absolute',
    end: 0,
  },
  topsImg: {
    display: 'flex',
    flexDirection: 'row'
  },
  tongxiang2: {
    height: 140,
    width: 100,
    marginTop: -10,
    flexDirection: 'column',
    justifyContent: 'center',
    display: 'flex',
    zIndex: 999,
  },
  tongxiang: {
    height: 140,
    width: 100,
  },
  mark: {
    position: 'absolute',
    width: 30,
    height: 30,
    right: -15,
    top: -20
  },
  contents: {
    marginLeft: 20
  },
  privatechat: {
    backgroundColor: '#1890FF',
    width: 55,
    height: 30,
    borderRadius: 25,
    padding: 5,
  },
  privatechat2: {
    width: 45,
    height: 20,
    borderRadius: 25,
    padding: 5,
    flexDirection: 'column',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#fff',
  },
  privatechat2_member: {
    width: 45,
    height: 20,
    borderRadius: 25,
    padding: 5,
    flexDirection: 'column',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#fff',
    backgroundColor: '#fff'
  },
  privatechat_text: {
    color: '#fff',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 10
  },
  privatechat_text_bronze: {
    color: '#AD773E',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 10
  },
  privatechat_text_silver: {
    color: '#8BB1C9',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 10
  },
  privatechat_text_gold: {
    color: '#D38D0F',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 10
  },
  privatechat_text3: {
    alignSelf: 'center',
    width: 18,
    height: 18
  },
  privatechat_Img: {
    alignSelf: 'center',
    width: 18,
    height: 18
  },
  remark: {
    width: 55,
    height: 30,
    borderWidth: 1,
    borderRadius: 25,
    marginLeft: 10,
    flexDirection: 'column',
    justifyContent: 'center',
  },
  remark2: {
    width: 45,
    height: 20,
    borderRadius: 25,
    marginLeft: 0,
    flexDirection: 'column',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#fff',
    marginTop: 10
  },
  remark2_member: {
    width: 45,
    height: 20,
    borderRadius: 25,
    marginLeft: 0,
    flexDirection: 'column',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#fff',
    marginTop: 10,
    backgroundColor: '#fff'
  },
  remark_text: {
    color: '#fff',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 10
  },
  remark_text_bronze: {
    color: '#AD773E',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 10,
  },
  remark_text_silver: {
    color: '#8BB1C9',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 10,
  },
  remark_text_gold: {
    color: '#D38D0F',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 10,
  },
  introduce: {
    display: 'flex',
    flexDirection: 'column',
    marginTop: -5
  },
  introduce_content: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
  },
  content_view: {
    display: 'flex',
    flexDirection: 'row',
    width: '83%',
    marginBottom: 5
  },
  introduce_text: {
    color: 'black',
    fontSize: 30,
  },
  introduce_text0: {
    fontSize: 19,
    color: 'white',
    maxWidth: 140,
    marginLeft: 3
  },
  introduce_text0_2: {
    fontSize: 19,
    color: 'black',
    maxWidth: 140,
    marginLeft: 3
  },
  introduce_img: {
    width: 16,
    height: 16,
    marginTop: 5,
  },
  information: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    height: 140,
    marginTop: 5
  },
  occupation: {
    display: 'flex',
    flexDirection: 'row',
  },
  information_text: {
    marginLeft: 15,
    marginTop: 1
  },
  information_text0: {
    marginLeft: 5,
    marginTop: 1,
    color: '#fff',
    fontSize: 11,
    alignSelf: 'center'
  },
  information_text0_member: {
    marginLeft: 5,
    marginTop: 1,
    color: '#000',
    fontSize: 11,
    alignSelf: 'center'
  },
  information_text4: {
    color: '#000',
    fontSize: 11,
    alignSelf: 'center'
  },
  information_text3: {
    marginLeft: 5,
    marginTop: 1,
    color: '#fff',
    fontSize: 11,
    width: 200,
    alignSelf: 'flex-start'
  },
  information_text3_member: {
    marginLeft: 5,
    marginTop: 1,
    color: '#000',
    fontSize: 11,
    width: 200,
    alignSelf: 'flex-start'
  },
  hobby: {
    display: 'flex',
    flexDirection: 'row',
    marginLeft: 5,
    marginTop: 5
  },
  hobby2: {
    display: 'flex',
    flexDirection: 'row',
    marginTop: -10
  },
  reputation: {
    display: 'flex',
    flexDirection: 'row',
    marginTop: -10
  },
  label: {
    display: 'flex',
    flexDirection: 'row',
    marginTop: -10,
    height: 25,
  },
  label_box: {
    width: 60,
    height: 25,
    flexDirection: 'column',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#fff',
    marginLeft: 5,
    borderRadius: 2,
    marginTop: 5
  },
  label_box_member: {
    width: 60,
    height: 25,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#FFFFFFA1',
    marginLeft: 5,
    borderRadius: 2,
    marginTop: 5
  },
  label_text: {
    color: '#fff',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 9
  },
  label_text_bronze: {
    color: '#D19B5A',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 9
  },
  label_text_silver: {
    color: '#8BB1C9',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 9
  },
  label_text_gold: {
    color: '#D38D0F',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 9
  },
  Selfdisplay: {
    display: 'flex',
    flexDirection: 'column',
    alignContent: 'space-between',
    padding: 15,
    flex: 1
  },
  Selfdisplay_view: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    padding: 15,
    top: 10
  },
  Selfdisplay_text: {
    fontSize: 20,
    fontWeight: '900',
  },
  Selfdisplay_text2: {
    fontSize: 20,
    fontWeight: '900',
    color: '#ccc'
  },
  Selfdisplay_img: {
    height: 60,
    backgroundColor: '#00000073',
    marginTop: -60,
    width: '100%',
    padding: 15,
    borderBottomEndRadius: 10,
    borderBottomStartRadius: 10,
    flexWrap: 'wrap'
  },
  Selfdisplay_img2: {
    height: 60,
    backgroundColor: '#00000073',
    marginTop: -60,
    width: '100%',
    padding: 15,
    borderBottomEndRadius: 10,
    borderBottomStartRadius: 10,
    flexWrap: 'wrap'
  },
  img_text: {
    color: '#fff',
    width: '100%',
    fontSize: 18
  },
  Selfdisplay_image: {
    width: '100%',
    height: 180,
    borderRadius: 10,
    marginTop: 20,
  },
  dynamic: {
    // padding: 10,
    flex: 1
  },
  dynamic_text: {
    fontSize: 20,
    marginLeft: 20,
  },
  dynamic_text2: {
    fontSize: 20,
    marginLeft: 20,
    color: '#ccc'
  },
  content: {
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    flexDirection: "column-reverse"
  },
  Modals: {
    backgroundColor: '#fff',
    padding: 20,
    paddingTop: 25,
    display: 'flex',
    flexDirection: 'column',
    // marginTop: 530
  },
  Modals_top: {
    flex: 3,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  top_text: {

  },
  top_text2: {
    fontSize: 20
  },
  Modals_content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginTop: 30
  },
  content_img: {
    width: 100,
    height: 100,
    borderRadius: 55
  },
  content_text: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 10
  },
  Modals_bottom: {
    display: 'flex',
    flexDirection: 'row',
    backgroundColor: '#fff',
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 20
  },
  bottom_input: {
    backgroundColor: '#E6E6E6',
    borderRadius: 10,
    paddingLeft: 20,
    width: 240
  },
  bottom_btn: {
    backgroundColor: '#1890FF',
    width: 60,
    height: 40,
    borderRadius: 10,
    marginTop: 5,
    marginLeft: 10,
    flexDirection: 'column',
    justifyContent: 'center'
  },
  bottom_btn2: {
    backgroundColor: '#1890FF',
    width: '100%',
    height: 40,
    borderRadius: 10,
    marginTop: 5,
    marginLeft: 10,
    flexDirection: 'column',
    justifyContent: 'center'
  },
  btn_text: {
    textAlign: 'center',
    textAlignVertical: 'center',
    color: '#fff'
  },
  bottom_container: {
    height: 100,
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  bottom_text: {
    color: "rgba(196, 196, 196, 1)"
  },
  statusBar: {
    width: width,
    height: statusBarHeight,
    backgroundColor: 'transparent',
  },
  img: {
    width: 21,
    height: 21
  },
  select: {
    marginTop: 60,
    position: 'absolute',
    backgroundColor: '#fff',
    padding: 8,
    right: 10,
    width: 80,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    borderRadius: 6
  },
  select_list: {

  },
  select_text: {
    fontSize: 11,
    textAlign: 'center',
    textAlignVertical: 'center'
  }
});
